/*
 * @Descripttion:
 * @Author: cuidm
 * @Date: 2022-09-21 16:45:26
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-30 13:46:30
 */
import React, { useEffect, useState } from 'react';
import { message, Space } from 'antd';
import { CheckCard } from '@ant-design/pro-components';
import { CmdbHeader, Authorized } from '@/components';
import { isAuthorized } from '@/components/Authorized';
import { SelectOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import permission from '@/config/permission';
import './index.less';

const GroupCard = ({
    history,
    fieldTypeData,
    groupInfo,
    cardData,
    title,
    showEdit,
    showDelete,
    showToolip,
    setCheckedGroup, //设置选中分组
    setDeleteGroup, //删除分组
    setEditGroup, //修改分组
    cardClick, //查看卡片详情
    setCardInfo, //设置选中卡片
    setCreateCard, //创建卡片
    setEditCard, //修改卡片
    setDeleteCard, //删除卡片
}) => {
    const [fieldType, setFieldType] = useState({});
    useEffect(() => {
        if (fieldTypeData) {
            setFieldType(fieldTypeData);
        }
    }, [fieldTypeData]);

    return (
        <div className="group-card">
            <CmdbHeader
                style={{ display: 'inline-block' }}
                titleList={[title]}
                showEdit={isAuthorized(permission.modelField_edit).isPermission ? showEdit : false}
                showDelete={isAuthorized(permission.modelField_delete).isPermission ? showDelete : false}
                showToolip={showToolip}
                OnDeleteClick={() => {
                    if (cardData?.length) {
                        message.warning('分组下有模型字段，不可删除！');
                        return;
                    }
                    setDeleteGroup(true);
                    setCheckedGroup(groupInfo);
                }}
                OnEditClick={() => {
                    setEditGroup(true);
                    setCheckedGroup(groupInfo);
                }}
            />
            <CheckCard.Group size="small" style={{ padding: '5px' }}>
                {cardData.map((item, index) => {
                    return (
                        <CheckCard
                            checked={false}
                            key={item.propertyKey}
                            title={<span onClick={() => cardClick(item)}>{item.propertyName}</span>}
                            className={item.woIsSystem == 1 ? `property inner` : `property`}
                            description={
                                <span
                                    style={{
                                        fontSize: '12px',
                                        lineHeight: ' 16px',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap',
                                        width: '100%',
                                        display: 'inline-block',
                                    }}
                                >
                                    <span className="m-r-10">{fieldType[item.propertyType] || item.propertyType}</span>
                                    {item.propertyKey}
                                </span>
                            }
                            extra={
                                <div className="checkcard-link">
                                    <Authorized authority={permission.modelField_edit} noMatch={null}>
                                        <span className="checkcard-link-icon">
                                            <span
                                                className="iconfont icon-edit"
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    if (setCardInfo) setCardInfo(item);
                                                    if (setEditCard) setEditCard(true);
                                                }}
                                            />
                                        </span>
                                    </Authorized>
                                    <Authorized authority={permission.modelField_delete} noMatch={null}>
                                        {item.woIsSystem == 1 ? null : (
                                            <span className="checkcard-link-icon">
                                                <span
                                                    className="iconfont icon-delete"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        if (setCardInfo) setCardInfo(item);
                                                        if (setDeleteCard) setDeleteCard(true);
                                                    }}
                                                />
                                            </span>
                                        )}
                                    </Authorized>
                                </div>
                            }
                        />
                    );
                })}
                <Authorized authority={permission.modelField_add} noMatch={null}>
                    <CheckCard
                        title={
                            <div>
                                <span className="iconfont icon-plus" style={{ fontSize: 14 }}>
                                    &nbsp;新增
                                </span>
                            </div>
                        }
                        className={`property add`}
                        onClick={(e) => {
                            e.stopPropagation();
                            setCheckedGroup(groupInfo);
                            if (setCreateCard) setCreateCard(true);
                        }}
                    />
                </Authorized>
            </CheckCard.Group>
        </div>
    );
};
export default GroupCard;
